<template>
  <div class="article-page">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-nav">
      <div class="breadcrumb-content">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/knowledge' }">养老知识</el-breadcrumb-item>
          <el-breadcrumb-item>{{ knowledge.title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <div class="article-detail">
      <el-card class="article-content">
        <!-- 文章头部 -->
        <div class="article-header">
          <h1>{{ knowledge.title }}</h1>
          <div class="article-meta">
            <div class="meta-left">
              <el-avatar :size="32" :src="knowledge.author_avatar || '/default-avatar.png'" />
              <span class="author-name">{{ knowledge.author || '管理员' }}</span>
              <span class="publish-time">{{ formatDateTime(knowledge.created_at) }}</span>
            </div>
            <div class="meta-right">
              <el-tag size="small">养老知识</el-tag>
            </div>
          </div>
        </div>

        <!-- 文章内容 -->
        <div class="article-body">
          <div v-for="(line, index) in knowledge.content?.split('\n')" :key="index" class="content-line"
            :class="{ 'is-title': line.includes('：') }">
            <template v-if="line.includes('：')">
              <el-icon>
                <ArrowRight />
              </el-icon>
              {{ line }}
            </template>
            <template v-else>{{ line }}</template>
          </div>
        </div>

        <!-- 文章底部 -->
        <div class="article-footer">
          <div class="interaction-bar">
            <div class="like-btn" :class="{ active: knowledge.is_liked }" @click="handleLike">
              <el-icon>
                <StarFilled />
              </el-icon>
              <span>{{ knowledge.likes_count || 0 }} 点赞</span>
            </div>
            <div class="collect-btn" :class="{ active: knowledge.is_favorited }" @click="handleFavorite">
              <el-icon>
                <Collection />
              </el-icon>
              <span>{{ knowledge.favorites_count || 0 }} 收藏</span>
            </div>
            <div class="share-btn" @click="handleShare">
              <el-icon>
                <Share />
              </el-icon>
              <span>分享</span>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 温馨提示 -->
      <el-card class="tips-section">
        <template #header>
          <div class="section-header">
            <span>温馨提示</span>
          </div>
        </template>
        <div class="tips-list">
          <div class="tip-item">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>本文内容仅供参考，具体情况请咨询专业人士</span>
          </div>
          <div class="tip-item">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>如有问题可以在线咨询我们的专家</span>
          </div>
          <div class="tip-item">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>欢迎分享转发，但请注明来源</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Calendar,
  Star,
  Collection,
  Share,
  ArrowLeft,
  Timer,
  Reading,
  InfoFilled,
  ArrowRight,
} from '@element-plus/icons-vue'
import api from '@/api'

const route = useRoute()
const knowledgeId = route.params.id
const knowledge = ref({})
const loading = ref(true)

// 格式化日期时间
const formatDateTime = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// 获取知识详情
const fetchKnowledgeDetail = async () => {
  loading.value = true
  try {
    const response = await api.get(`/knowledge/${knowledgeId}`)
    knowledge.value = response.data
  } catch (error) {
    ElMessage.error('获取知识详情失败')
  } finally {
    loading.value = false
  }
}

// 点赞
const handleLike = async () => {
  try {
    const response = await api.post(`/knowledge/${knowledgeId}/like`)
    knowledge.value.is_liked = response.data.liked
    knowledge.value.likes_count = knowledge.value.likes_count + (response.data.liked ? 1 : -1)
    ElMessage.success(response.data.message)
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 收藏
const handleFavorite = async () => {
  try {
    const response = await api.post(`/knowledge/${knowledgeId}/favorite`)
    knowledge.value.is_favorited = response.data.favorited
    knowledge.value.favorites_count =
      knowledge.value.favorites_count + (response.data.favorited ? 1 : -1)
    ElMessage.success(response.data.message)
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 分享
const handleShare = () => {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(knowledge.value.share_url)
    ElMessage.success('链接已复制到剪贴板')
  } else {
    ElMessage.error('您的浏览器不支持自动复制')
  }
}

onMounted(() => {
  fetchKnowledgeDetail()
})
</script>

<style scoped>
.article-page {
  min-height: 100vh;
  padding: 20px;
  background-color: #f5f7fa;
}

.breadcrumb-nav {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.article-detail {
  max-width: 1200px;
  margin: 0 auto;
}

.article-content {
  margin-bottom: 24px;
  border-radius: 8px;
}

.article-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.article-header h1 {
  font-size: 2.5em;
  color: #2c3e50;
  margin-bottom: 20px;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.publish-time {
  color: #909399;
  font-size: 14px;
}

.article-body {
  padding: 0 20px;
  line-height: 1.8;
  color: #2c3e50;
}

.content-line {
  margin-bottom: 16px;
  line-height: 1.8;
  color: #2c3e50;
  font-size: 16px;
}

.content-line.is-title {
  color: var(--el-color-primary);
  font-weight: 500;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.interaction-bar {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid #eee;
}

.like-btn,
.collect-btn,
.share-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: #606266;
  background: #f5f7fa;
}

.like-btn:hover,
.collect-btn:hover {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.share-btn:hover {
  color: var(--el-color-success);
  background: var(--el-color-success-light-9);
}

.like-btn.active,
.collect-btn.active {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.tips-section {
  border-radius: 8px;
  margin-bottom: 40px;
}

.tips-list {
  padding: 20px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: #666;
  border-bottom: 1px dashed #f5d7a1;
}

.tip-item:last-child {
  border-bottom: none;
}

.tip-item .el-icon {
  color: var(--el-color-warning);
  font-size: 20px;
}

@media (max-width: 768px) {
  .article-page {
    padding: 12px;
  }

  .article-header h1 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .article-meta {
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  .interaction-bar {
    flex-wrap: wrap;
    gap: 20px;
  }

  .like-btn,
  .collect-btn,
  .share-btn {
    padding: 8px 16px;
  }

  .tips-section {
    margin: 0 12px 24px;
  }
}
</style>
